<template>
  <div class="top-menu">
    <el-menu :default-active="activeIndex"
             mode="horizontal"
             text-color="#333">
      <template v-for="(item,index) in items">
        <el-menu-item :index="item.parentId+''" :id="'menu'+item.parentId"
                      @click.native="openMenu(item,index)"
                      :key="index" :style="{borderBottom:activeItem==index?themeVal:''}">
          <template slot="title">
            <!-- <i :class="item.icon"></i> -->
            {{item.label}}
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters,mapState,mapMutations } from "vuex";
import { setStore, getStore } from '@/util/store'
import { getMenuOfParentId } from "@/api/public/menu"
import { validatenull } from '@/util/validate'
import { RestructureMenu } from '@/util/util'
import menu from "../../../mock/menu";
export default {
  name: "top-menu",
  data () {
    return {
      activeIndex: "0",
      activeItem:0,
      items: [ ],
    };
  },
  created() {
      this.items = [];
      getStore({name:"menuAll"}).forEach(item=>{
          if(validatenull(item.parentId)){
              this.items.push({
                  label: item.name,
                  icon: item.menuIcon,
                  href: item.children[0].path + item.children[0].children[0].path,
                  parentId: item.id,
                  children: RestructureMenu(item.children)
              })
          }
      })
      console.log(this.items,'----------ll')
      let parentId = getStore({ name: 'parentId'});
      this.$nextTick(()=>{
          document.getElementById('menu'+parentId).classList.add('menuLiClass')
          document.getElementById('menu'+this.items[0].parentId).classList.add('menuLiClassNo')
      })

  },
  computed: {
      ...mapState({
          menuAll: state => state.menuAll,
          /*menu: state => state.menu*/
      }),
      ...mapGetters(["tagCurrent", " ","theme"]),
      themeVal () { return '2px solid '+this.theme},
      menu:{
          get(){
              return this.$store.state.menu
          },
          set(val){
              this.$store.state.menu = val
          }
      }
  },
  methods: {
    ...mapMutations(['SET_MENU']),
    openMenu (item,index) {
      setStore({ name: 'parentId', content:item.parentId , type: 'session' })
      getMenuOfParentId({ parentId:item.parentId }).then(res =>{
        if(res.data.code==200){
            let menuData = RestructureMenu(res.data.data[0].children);
            this.$router.$avueRouter.formatRoutes(menuData, true);
            this.SET_MENU(menuData)
        } else {
            return
        }
        let itemActive,
          childItemActive = 0;
        if (item.href) {
          itemActive = item;
        } else {
          if (this.menu[childItemActive].length == 0) {
            itemActive = this.menu[childItemActive];
          } else {
            itemActive = this.menu[childItemActive].children[childItemActive];
          }
        }
        this.activeItem=index;
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: itemActive.label,
            src: itemActive.href
          })
        });
      })
      document.getElementsByClassName('menuLiClass')[0].classList.remove('menuLiClass')
      document.getElementsByClassName('menuLiClassNo')[0].classList.remove('menuLiClassNo')

    }
  }
};
</script>
<style>
  .menuLiClass{
    border-bottom: 2px solid rgb(64, 158, 255)!important;
  }
  .menuLiClassNo{
     border-bottom: 0px solid rgb(64, 158, 255)!important;
   }
</style>